<template>
    <div class="box">
            <figure  v-for="dcxinxi in dcxinxis" :key="dcxinxi.id" >
                    <img :src="dcxinxi.img " alt=""> 
            </figure>


    </div>
</template>
<script>
export default {

    data(){
        return {
     
          dcxinxis:[]
        }
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/dcxinxis",true);
        xhr.onreadystatechange = ()=>{
            // xhr.reayState==4: 表示请求响应的过程完毕。
            // xhr.status==200 ：后端响应了正常的数据（响应没有问题）
            if(xhr.readyState==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.dcxinxis = JSON.parse(xhr.responseText);
            }
        }
        xhr.send();
    }    
}
</script>


<style scoped>
.box{
    width: 3.45rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0.1rem auto;
}
figure{
    margin-bottom: 0.2rem;
}
figure div{
    width:1rem ;
    height:1.03rem ;
    background-color: rgb(191, 203, 224);
    border-radius: 0.05rem;
    padding-top: 0.4rem;
    text-align: center;
    color: rgb(64, 123, 231);
  
}
figure img{
    width:1rem ;
    height:1.43rem ;
    flex-shrink: 0;
}




</style>


